<template>
	<view class="goods">
		<u-search class="search" 
		placeholder="请输入要搜索的商品" 
		v-model="keyword" 
		@search="searchClick" 
		@blur="searchClick" 
		@clear="searchClear"></u-search>
		<view class="wrapper">
			<view class="content">
				<scroll-view :scroll-y="true" class="goods-category">
						<view v-for="item in category" :key="item.id" class="category-item">
							<view class="level1">{{item.name}}</view>
							<view class="level2" :class="child.id===currentId?'action':''" v-for="child in handleCategory(item.children)" :key="child.id" @click="cateClick(child.id)">
								{{child.name}}
							</view>
						</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="goods">
					<view class="goods-info">
						<view v-show="isGoods" class="noGoods">该类暂无商品</view>
						<u-loading-icon text="加载中" textSize="18" :show="isLoding" class="noGoods"></u-loading-icon>
						<navigator :url="'/pages/goods/detail?id='+item.id" class="goods-item" v-for="item in goodsData" :key="item.id">
							<image mode="aspectFit" :src="item.cover_url"></image>
							<view>{{item.title}}</view>
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				category: [],
				goodsData: [],
				currentId: 0,
				isGoods: false,
				isLoding: false
			}
		},
		onLoad() {
			this.getGoods()
		},
		methods: {
			// 获取商品信息数据
			async getGoods(params={}, backcall) {
				this.isLoding = true
				this.isGoods = false
				const res = await uni.$u.http.get('/api/goods', {
					params
				})
				backcall && backcall()
				this.isLoding = false
				this.category = res.categories.slice(0, 5)
				this.goodsData = res.goods.data
				if (this.goodsData.length === 0) {
					this.isGoods = true
				}else {
					this.isGoods = false
				}
			},
			handleCategory(arr) {
				return arr.slice(0, 3)
			},
			// 点击分类列表事件
			cateClick(id) {
				this.currentId = id
				const params = {
					page: 1,
					category_id: id
				}
				this.goodsData = []
				this.getGoods(params, () => {
					this.goodsData = []
				})
			},
			searchClick(value) {
				const params = {
					page: 1,
					title: value
				}
				this.goodsData = []
				this.getGoods(params, () => {
					this.goodsData = []
				})
			},
			searchClear() {
				this.goodsData = []
				this.getGoods()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods {
		.search {
			margin: 20rpx!important;
		}
		.wrapper {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin-top: 100rpx;
			margin-bottom: 20rpx;
			.content {
				display: flex;
				height: 100%;
				.goods-category {
					height: 100%;
					width: 200rpx;
					.category-item {
						.level1 {
							font-weight: 700;
							color: #FFFFFF;
							background-color: #1296db;
							text-align: center;
						}
						.level2 {
							padding: 20rpx;
							border-bottom: 1px solid #333;
							border-right: 1px solid #eee;
							&:nth-last-child(1) {
								border-bottom: none;
							}
						}
						.action {
							background-color: #55aa7f;
							color: #FFFFFF;
						}
					}
				}
				.goods {
					height: 100%;
					.goods-info {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-top: 20rpx;
						.goods-item {
							width: 50%;
							margin-top: 20rpx;
							padding-bottom: 20rpx;
							text-align: center;
							image {
								width: 220rpx;
								height: 220rpx;
							}
						}
						.noGoods {
							margin: 0 auto;
						}
					}
				}
			}
		}
	}

</style>
